<template>
  <div class="chat-content__wrap">
    <!-- <template v-if="chatStore.docSummarize.status"> -->
      <!-- <link-summarize v-if="chatStore.docSummarize.type === 'link'" /> -->
      <pdf-summarize v-if="chatStore.docSummarize.status &&chatStore.docSummarize.type === 'pdf'" />
    <!-- </template> -->
    <ai-agent v-if="chatStore.agent" />
    <chat-item v-if="rootNode" :key="rootNode.message_id" :item="rootNode" />
    <div v-if="curNode && curNode.role === 'assistant'" class="chat-status__actions">
      <div
        v-if="chatStore.status === 'error' && isSensitiveCode(chatStore.errorCode)"
        class="action-status error"
        @click="reEditMessage"
      >
        <svg-icon icon-class="refresh-btn"></svg-icon>
        <span>重新编辑</span>
      </div>
      <div
        v-else-if="!isTodoEnd && ['error', 'end', 'stop'].includes(chatStore.status)"
        class="action-status error"
        @click="resendMessage"
      >
        <svg-icon icon-class="refresh-btn"></svg-icon>
        <span>重新生成</span>
      </div>
      <!-- <div
        v-if="chatStore.status === 'chating'"
        class="action-status stop"
        @click="stopMessage"
      >
        <svg-icon icon-class="stop-btn" />
        <span>停止</span>
      </div> -->
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import ChatItem from '@/components/chat-item/index.vue'
import { isSensitiveCode } from '@/utils/index'
// import ChatMessage from '@/mixins/chat-message.js'
// import LinkSummarize from '@/components/chat/home/link-summarize.vue'
import PdfSummarize from './pdf-summarize.vue'
import AiAgent from './agent/ai-agent.vue'
export default {
  name: 'HomeChat',
  // mixins: [ChatMessage],
  inject: ['stopMessage', 'resendMessage', 'reEditMessage'], // 接收方法
  components: {
    ChatItem,
    AiAgent,
    PdfSummarize
    // HomeScreen
  },
  props: {
    rootNode: {
      type: Object,
      default: () => null
    },
    curNode: {
      type: Object,
      default: () => null
    }
  },
  data () {
    return {
      // rootNode: this.$rootNode,
      // curNode: this.$curNode
    }
  },
  computed: {
    ...mapGetters(['chatStore']),
    isTodoEnd () {
      return this.curNode.target?.business === '1' || this.curNode.business === '1'
    }
  },
  methods: {
    isSensitiveCode
  }
}
</script>

<style lang="scss" scoped>
.chat-content__wrap {
  overflow-anchor: none;
  padding: 0 4px;
  min-height: calc(100% - 2px);
  display: flex;
  flex-direction: column;
}
.chat-status__actions {
  text-align: center;
  // padding: 10px 0 0 0;
}
.action-status {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  background: rgba(255,255,255,0.1);
  padding: 7px 20px;
  border-radius: 24px;
  color: $color-white;
  font-size: $font-size-base;
  margin-bottom: 10px;
  cursor: pointer;
  .svg-icon {
    margin-right: 8px;
    font-size: 16px;
  }
  &:hover {
    background: rgba(255,255,255,0.2);
  }
}
.action-status.continue {
  display: flex;
  margin: 0 10px 10px 10px;
  border-radius: 5px;
  padding: 7px 10px;
  align-items: center;
  justify-content: space-between;
  .svg-icon {
    color: $color-white;
    font-size: 16px;
  }
}
.action-status.stop {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}
</style>
